<template>
	<coreshop-page title="银行卡" mode="left">
		<view class="box">
			<view class="card-list" v-if="state.bankCards.length > 0">
				<view class="item" v-for="item in state.bankCards" :key="item.id">
					<view class="card-msg">
						<image class="bank-icon" :src="item.bankLogo" />
						<view class="info">
							<view class="name">{{item.bankName}}</view>
							<view class="code">{{item.cardNumber}}</view>
						</view>
					</view>
					<view class="card-btn">
						<view>
							<uv-tags v-if="item.isdefault" text="默认" plain plainFill type="error" size="mini"></uv-tags>
						</view>
						<view class="select-btn">
							<uv-button v-if="!item.isdefault" type="primary" size="mini" text="设为默认"
								@click="handleSetDefault(item)"></uv-button>
							<uv-button type="error" size="mini" text="删除" v-if="!item.isdefault"
								@click="handleDeleteCard(item)"></uv-button>
							<uv-button type="success" size="mini" v-if="state.type" text="选择"
								@click="handleSelectCard(item)"></uv-button>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂未数据"></coreshop-empty>
			</view>

			<coreshop-fixed-bottom-button :radius="100" title="添加银行卡"
				@onClick="onAddBankCard"></coreshop-fixed-bottom-button>
		</view>
		<uv-popup ref="bankCardFormPopupRef" mode="bottom" :round="8" :closeOnClickOverlay="false" closeable>
			<BankCardForm @onSave="onSaveBankCard()" />
		</uv-popup>
	</coreshop-page>
</template>

<script setup lang="ts">
	import BankCardForm from './bank-card-form.vue';
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { EmptyEnum } from '@/core/enum';
	import type { Response, BankCardType } from '@/core/models';
	import { queryMyBankcardsList, querySetDefaultBankCard, queryRemovebankcard } from '@/core/api';
	import { handleShowToast } from '@/core/utils';
	import { selectBankCard } from '@/core/consts';

	interface QueryParams {
		type ?: string;
	}

	const bankCardFormPopupRef = ref();

	const state = reactive<{
		bankCards : Array<BankCardType>;
		type : string;
	}>({
		bankCards: [],
		type: '',
	})

	onLoad((query : QueryParams) => {
		if (query?.type) {
			state.type = query?.type
		}
		getMyBankcardsList();
	})

	/** 获取银行卡列表 */
	const getMyBankcardsList = async () => {
		const bankcardsList : Response<Array<BankCardType>> = await queryMyBankcardsList();
		if (bankcardsList.status) {
			state.bankCards = bankcardsList.data;
		} else {
			handleShowToast(bankcardsList.msg)
		}
	}

	/** 删除卡 */
	const handleDeleteCard = (item : BankCardType) => {
		uni.showModal({
			title: '提示',
			content: '确定删除该银行卡?',
			async success(res : any) {
				if (res.confirm) {
					const bankCard : Response<any> = await queryRemovebankcard({ id: item.id });
					if (bankCard.status) {
						handleShowToast(bankCard.msg, 'success', () => {
							getMyBankcardsList();
						})
					} else {
						handleShowToast(bankCard.msg)
					}
				}
			}
		});
	}

	/** 设置默认 */
	const handleSetDefault = async (item : BankCardType) => {
		const bankCard : Response<any> = await querySetDefaultBankCard({ id: item.id });
		if (bankCard.status) {
			handleShowToast(bankCard.msg, 'success', () => {
				getMyBankcardsList();
			})
		} else {
			handleShowToast(bankCard.msg)
		}
	}

	/** 选择卡 */
	const handleSelectCard = (item : BankCardType) => {
		uni.setStorageSync(selectBankCard, item);
		uni.navigateBack()
	}

	const onAddBankCard = () => {
		bankCardFormPopupRef.value?.open();
	}

	const onSaveBankCard = () => {
		state.bankCards = [];
		getMyBankcardsList();
		bankCardFormPopupRef.value?.close();
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>